/**
 * Created by yujianfu on 2016/11/10.
 */
import React from 'react'
import {Card, Table, message, Button, Icon, Popover, Input, Collapse} from 'antd'
import Styles from '../Index.less'
import {fetchPost} from './../../../../../../utils/request'

const Panel = Collapse.Panel;

class Contacts extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      userId: props.userId,
      showCategory: props.showCategory,
      contactNum: 0,
      relationsNum: 0,
      exceptionNum: 0,
      list: [],
      calls: [],
      contactSelfItem: null,
      callSelfItem: null,
      sendList: [],
      content: '',
      contactVisible: false,
      callVisible: false,
      smsVisible: false,
      message: '',
      loading: false,
      timer: null,
      id: props.id,
      callTotal: 0,
      mechanism: 0,
      abnormal: 0,
      smsTotal: 0,
      smsMechanism: 0,
      smsRelative: 0,
      smslist: [],
      hideOther: props.hideOther
    }
  }

  componentWillUnmount() {
    clearTimeout(this.state.timer)
  }

  componentWillReceiveProps(props) {
    if (this.state.userId !== props.userId) {
      this.setState({
        userId: props.userId,
        id: props.id
      }, () => {
        this.getData()
      })
    }
  }

  componentDidMount() {
    this.getData()
  }

  getData() {
    this.setState({
      loading: true
    })
    if (this.state.userId != null) {
      fetchPost(`/user/${this.state.userId}/audit/contactCall/info`, {}).then(json => {
        if (json.code === 0) {
          if (json.data != null) {
            // console.log('returnMsg is ')
            // console.log(json.data.phoneCallRecordVO)

            this.setState({
              contactNum: json.data.contactNum || 0,
              relationsNum: json.data.relationsNum || 0,
              exceptionNum: json.data.exceptionNum || 0,
              list: json.data.list || [],
              calls: json.data.phoneCallRecordVO.phoneCallRecordItemVOList || [],
              callTotal: json.data.phoneCallRecordVO.total || 0,
              mechanism: json.data.phoneCallRecordVO.mechanism || 0,
              abnormal: json.data.phoneCallRecordVO.abnormal || 0,
              contactSelfItem: json.data.contactSelfItem,
              callSelfItem: json.data.callSelfItem,
              loading: false,
              smsTotal: json.data.smsRecordVO.total || 0,
              // smsMechanism: json.data.smsRecordVO.mechanism || 0,
              // smsRelative: json.data.smsRecordVO.relative || 0,
              smslist: json.data.smsRecordVO.smsRecordItemVOList || [],
            })
          }
        } else {
          this.setState({
            contactNum: '',
            relationsNum: '',
            exceptionNum: '',
            list: [],
            calls: [],
            loading: false,
            contactSelfItem: {},
            callSelfItem: {},
            message: json.msg
          })
        }

      })
    } else {
      this.setState({
        contactNum: '',
        relationsNum: '',
        exceptionNum: '',
        list: [],
        calls: [],
        loading: false,
        contactSelfItem: {},
        callSelfItem: {}
      })
    }
  }

  showContactTotal() {
    return (
      <div style={{display: 'inline-block'}}>
        <span>Contacts&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>Total:{this.state.contactNum}&nbsp;&nbsp;</span>
        <span style={{color: "#6B8E23"}}>Relatives1:{this.state.relationsNum}&nbsp;&nbsp;</span>
        <span style={{color: "#EE2C2C"}}>Abnormal:{this.state.exceptionNum}&nbsp;&nbsp;</span>

      </div>
    )
  }

  showCallTotal() {
    return (
      <div style={{display: 'inline-block'}}>
        Call
        Records &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        Total:{this.state.callTotal}&nbsp;&nbsp;
        {/*<span style={{color: "#8A2BE2"}}>Company:{this.state.mechanism}&nbsp;&nbsp;</span>*/}
        {/*<span style={{color: "#EE2C2C"}}>Abnormal:{this.state.abnormal}&nbsp;&nbsp;</span>*/}
      </div>
    )
  }


  showSMSTotal() {
    return (
      <div style={{display: 'inline-block'}}>
        SMS Log &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span>Total:{this.state.smsTotal}&nbsp;&nbsp;</span>
        {/*<span style={{color: "#6B8E23"}}>Relatives:{this.state.mechanism}&nbsp;&nbsp;</span>*/}
        {/*<span style={{color: "#EE2C2C"}}>Mechanism:{this.state.mechanism}&nbsp;&nbsp;</span>*/}
      </div>
    )
  }


  showContactList() {
    this.setState({
      contactVisible: true
    })
  }

  showCallList() {
    this.setState({
      callVisible: true
    })
  }

  showSmsList() {
    this.setState({
      smsVisible: true
    })
  }

  render() {
    const columns = [
      {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
        render: (text, record) => {
          if (record.deviceType === 1) {
            return <font color='green'>{text}</font>
          } else if (record.deviceType === 2) {
            return <font color='#f60'>{text}</font>
          } else {
            return <p>{text}</p>
          }
        }
      },
      {
        title: 'Mobile',
        dataIndex: 'phone',
        key: 'phone',
        render: (text, record) => {
          if (record.red) {
            return <font color='#f60'>{text}</font>
          } else {
            return <p>{text}</p>
          }
        }
      },
      {
        title: 'Last Contact Time',
        dataIndex: 'lastTimeContactedStr',
        key: 'lastTimeContactedStr'
      },
      {
        title: 'Contact Times',
        dataIndex: 'timesContacted',
        key: 'timesContacted'
      },
      {
        title: 'Label',
        render: (text, record) => {
          if (record.deviceType === 1) {
            return <font color='green'>Relatives</font>
          } else if (record.deviceType === 2) {
            return <font color='#f60'>Abnormal</font>
          }
        }
      }
    ]

    const callsColumns = [
      {
        title: 'Last Contact Time',
        dataIndex: 'lastTimeStr',
        key: 'lastTimeStr'
      },

      {
        title: 'Mobile',
        dataIndex: 'phone',
        key: 'phone'
      },
      {
        title: 'Caller',
        dataIndex: 'mechanism',
        key: 'mechanism'
      },

      {
        title: 'Location',
        dataIndex: 'attribution',
        key: 'attribution'
      },
      {
        title: 'Call Out/Call In',
        dataIndex: 'callInAndOut',
        key: 'callInAndOut'
      },
      {
        title: 'Call Duration（s)',
        dataIndex: 'totalCallDuration',
        key: 'totalCallDuration'
      }
    ]

    const smsColumns = [
      {
        title: 'Last Time',
        dataIndex: 'lastTime',
        key: 'lastTime',
        width: 150,
      },
      {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
        width: 100,
      },
      {
        title: 'Mobile',
        dataIndex: 'mobile',
        key: 'mobile',
        width: 100,
      },
      // {
      //   title: 'Number Of Messages',
      //   dataIndex: 'messageNum',
      //   key: 'messageNum',
      //   width: 50,
      // },

      {
        title: 'Content',
        dataIndex: 'content',
        key: 'content'
      }

    ]

    return (
      <div className={Styles.detailModule}>
        <Collapse defaultActiveKey="1">
          <Panel header={this.showContactTotal()} key="1">
            <div style={{maxHeight: 600, overflow: 'auto', textAlign: 'center'}}>
              {
                this.state.list.length < 2000 || this.state.contactVisible
                  ? <Table
                    size='small'
                    pagination={false}
                    bordered
                    dataSource={this.state.list}
                    columns={columns}
                    loading={this.state.loading}
                    key='name'
                  />
                  : <Button className='mt10 mb10' type='primary' onClick={() => {
                    this.showContactList()
                  }}>Show</Button>
              }
            </div>
          </Panel>

          <Panel header={this.showCallTotal()} key="2">
            <div style={{maxHeight: 600, overflow: 'auto', textAlign: 'center'}}>
              {
                this.state.calls.length < 2000 || this.state.callVisible
                  ? <Table
                    size='small'
                    pagination={false}
                    bordered
                    dataSource={this.state.calls}
                    columns={callsColumns}
                    key='name2'
                    loading={this.state.loading}
                  />
                  : <Button type='primary' className='mt10 mb10' onClick={() => {
                    this.showCallList()
                  }}>Show</Button>
              }
            </div>
          </Panel>

          <Panel header={this.showSMSTotal()} key="3">
            <div style={{maxHeight: 600, overflow: 'auto', textAlign: 'center'}}>
              {
                this.state.smslist.length < 2000 || this.state.smsVisible
                  ? <Table
                    size='small'
                    pagination={false}
                    bordered
                    dataSource={this.state.smslist}
                    columns={smsColumns}
                    key='name3'
                  />
                  : <Button type='primary' className='mt10 mb10' onClick={() => {
                    this.showSmsList()
                  }}>Show</Button>
              }
            </div>
          </Panel>
        </Collapse>

      </div>
    )
  }
}

export default Contacts
